<template>
  <div class="container">
    <div>
      <h1 class="cart">我的购物车</h1>
    </div>
    <div>
      <ul>
        <li class="cart-list" v-for="(item, index) in cartProduct" :key="index">
          <div class="image-cart">
            <img :src="item.img" alt="" />
          </div>
          <div class="cart-title">
            <p>{{ item.name }}</p>
          </div>
          <div class="controll">
            <button class="deleteCount" @click="deleteCount(item)">-</button>
            <span>{{ item.count }}</span>
            <button class="incrementCount" @click="incrementCount(item)">
              +
            </button>
          </div>
        </li>
      </ul>
    </div>
    <div v-show="totalPrice" class="total">
      总价：<span>{{ totalPrice }}</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: "Home",
  computed: {
    ...mapState("cart", ["cartProduct"]),
    ...mapGetters("cart", ["totalPrice"]),
  },
  methods: {
    ...mapMutations("cart", ["deleteCount", "incrementCount"]),
  },
};
</script>

<style lang='scss' scope>
.container {
  width: 500px;
  margin: 0 auto;
  .cart {
    color: darkcyan;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 2rem;
    text-align: center;
  }
}
.cart-list {
  height: 100px;
  display: flex;
  align-items: center;
}
.image-cart {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    display: flex;
    width: 60px;
  }
}
.cart-title {
  height: 80px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  p {
    line-height: 80px;
  }
}
.controll {
  display: flex;
  align-items: center;
  .deleteCount {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    margin: 3px;
    border-radius: 3px;
  }
  span {
    font-size: 1.2rem;
    padding: 6px;
  }
  .incrementCount {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    margin: 3px;
    border-radius: 3px;
  }
}
.total {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  span {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #e4393c;
    font-weight: 600;
    font-size: 1.2rem;
    height: 3rem;
    line-height: 3rem;
  }
}
</style>